<template>
  <div class="page-login">
    <div class="wrap">
    <h2 class="title">养生管理系统</h2>
    <el-form :model="formData" :rules="formRules" ref="formRef">
        <el-form-item prop="userName">
            <el-input placeholder="请输入用户名" v-model="formData.userName"/>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="formData.password"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="isloading" @click="handleLogin">登录</el-button>
        </el-form-item>
  </el-form>
  </div>
</div>
</template>

<script>
import {login} from "@/api/user.js"
export default {
  data() {
    return {
      //存放表单数据
      formData: {
        userName:"",
        password:"",
        
      },

      //表单校验规则
      formRules:{
        //需要校验的字段
        userName:[
            //校验的规则：必填 如果没输入的提示
            {required:true,message:"请输入用户名"},
            //规定只能输入邮箱的格式
            //{type:"email",message:"请输入邮箱地址"}
        ],
        password:[
            {required:true,message:"请输入密码",},
            //{pattern:/^[0-9]{6,16}$/,message:"密码只能是6~16位"}
        ]
      },
      isloading:false
    };
  },
  methods:{
    async handleLogin(){
      try {
        await this.$refs.formRef.validate()
        //表单校验通过，准备调用登录接口，只需要引入api请求方法
        this.isloading=true
        login({
          adminname:this.formData.userName,
          password:this.formData.password
        }).then((data)=>{
          //console.log(data);
          /* if(response.code==200){
            //this.$router.push("/")
          }else{
            alert(response.message)
          } */
          //上面的判断统一写入了request.js里

          //1.将token写入本地存储
          //console.log(data.data.token);
          localStorage.setItem("token",data.data.token)

          //调用Vuex里面的setUerName的mutation
          //this.$store.commit("setUserName",data.data.adminname)

            //换成setState存储所有数据
          this.$store.commit("setState",data.data)


          //this.isloading=false
          //2.跳转页面
          //this.$router.push("/")

          //调整成有权限的第一个页面
          const route=this.$store.getters.permissionRoutes[0]
          //console.log(route);
          function getName(route){
            let str=""
            if(route.children){
              str=getName(route.children[0])
            }else{
              str=route.name
            }
            return str
          }
          console.log(getName(route));
          this.$router.push(getName(route))


        }).catch((err)=>{
          console.log("2222");
          console.log("catch",err);
        }).finally(()=>{
          this.isloading=false
        })
      } catch (error) {
        
      }
    }



    // handleLogin(){
    //     //this.$router.push("/")
    //     //给表单设置ref，点击登录拿到dom，里面的validate方法可以使用,校验
    //     //console.log(this.$refs.formRef);
    //     //得到一个类似isOK的值校验是否通过，为true或false
    //     //方法调用的时候会校验，告诉我们是否通过，true表示验证通过，false表示不通过，且设置的提示会出来
    //     /* this.$refs.formRef.validate((isOK)=>{
    //         //console.log(isOK);
           
    //     }) */
    //     //如果不传参数，得到的是一个promise对象

    //     this.$refs.formRef.validate().then(()=>{

    //     }).catch((err)=>{
    //         console.log(err);
    //     })

    //     //可以用awite的方法？
    // }
  }
};
</script>

<style lang="scss" scoped>
    .page-login{
        height: 100%;
        background: #2b3c4d;
        & .wrap{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        };
        .title{
            text-align: center;
            color:white;
        }
    }
    .el-form{
        width: 320px;
        padding: 32px 32px 14px ;
        background: white;
        border-radius: 10px;
    }
    .el-button{
        width: 100%;
    }
    //:deep(".el-button span") {
  //   color: red;
  // }
  
</style>
